import React, { Component } from 'react';
import './HotList.scss';
import eventBus from '../comment/bus';
class HotList extends Component {
  constructor() {
    super();
    this.state = {
      searchArr: [
        '中国开门红 为世界经济增添暖意',
        '中国开门红 为世界经济增添暖意',
        '中国开门红 为世界经济增添暖意',
        '中国开门红 为世界经济增添暖意',
        '中国开门红 为世界经济增添暖意',
        '中国开门红 为世界经济增添暖意',
        '中国开门红 为世界经济增添暖意',
        '中国开门红 为世界经济增添暖意',
        '中国开门红 为世界经济增添暖意',
        '中国开门红 为世界经济增添暖意',
        '中国开门红 为世界经济增添暖意',
        '中国开门红 为世界经济增添暖意',
        '中国开门红 为世界经济增添暖意',
        '中国开门红 为世界经济增添暖意',
        '中国开门红 为世界经济增添暖意',
        '中国开门红 为世界经济增添暖意',
        '中国开门红 为世界经济增添暖意',
        '中国开门红 为世界经济增添暖意',
        '中国开门红 为世界经济增添暖意',
        '中国开门红 为世界经济增添暖意',
        '中国开门红 为世界经济增添暖意',
        '中国开门红 为世界经济增添暖意',
        '中国开门红 为世界经济增添暖意',
        '中国开门红 为世界经济增添暖意',
        '中国开门红 为世界经济增添暖意',
        '中国开门红 为世界经济增添暖意',
        '中国开门红 为世界经济增添暖意',
        '中国开门红 为世界经济增添暖意',
        '中国开门红 为世界经济增添暖意',
        '中国开门红 为世界经济增添暖意',
        '中国开门红 为世界经济增添暖意',
        '中国开门红 为世界经济增添暖意',
        '中国开门红 为世界经济增添暖意',
        '中国开门红 为世界经济增添暖意',
        '中国开门红 为世界经济增添暖意',
        '中国开门红 为世界经济增添暖意',
        '中国开门红 为世界经济增添暖意',
      ],
      indexs: [0, 3, 1, 4, 2, 5],
    };
  }
  // 添加事件监听,监听从header组件发送过来的sayHello事件
  componentDidMount() {
    eventBus.addListener('comment', this.sayHelloContent);
  }
  // 处理监听事件
  sayHelloContent(a) {
    console.log(a);
  }
  // 移除事件监听
  componentWillUnmount() {
    eventBus.removeListener('comment', this.sayHelloContent);
  }
  //换一换
  cut = () => {
    this.setState({
      indexs: this.state.indexs.every((item) => item > 11)
        ? [0, 3, 1, 4, 2, 5]
        : this.state.indexs.map((item) => item + 6),
    });
  };
  render() {
    return (
      <div className="list">
        {/* 换一换 */}
        <header className="list-hd">
          <span className="list-one">百度热搜</span>
          <span
            className="list-two"
            onClick={() => {
              this.cut();
            }}
          >
            换一换
          </span>
        </header>
        {/* 内容列表 */}
        <ul>
          {this.state.searchArr.map((item, index) => {
            return (
              <li key={index}>
                <span>
                  {this.state.indexs ? this.state.indexs[index] : '箭头'}
                </span>
                <a href="###">
                  {this.state.searchArr[this.state.indexs[index]]}
                </a>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}

export default HotList;
